<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row>
        <!--工具条-->
        <el-form
          :inline="true"
          :model="searchfrom"
          class="toolbar"
          label-position="right"
          label-width="70px"
        >
          <el-row>
            <!-- <el-form-item label="手机号">
              <el-input v-model="searchfrom.queryString"></el-input>
            </el-form-item> -->
            <el-form-item label="提币状态">
              <el-select v-model="searchfrom.queryType" placeholder="请选择" clearable>
                <el-option
                  v-for="item in statusLits"
                  :label="item.name"
                  :key="item.status"
                  :value="item.status"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label>
              <el-button @click="searchUserList" type="success" style="width: 170px">查询</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </el-row>
      <el-row>
        <el-table :data="gridData" border
        stripe>
          <!-- <el-table-column property="authName" label="姓名"></el-table-column> -->
          <el-table-column property="mobile" label="手机号"></el-table-column>
          <el-table-column property="number" label="数量"></el-table-column>
          <el-table-column property="status" label="状态">
            <template slot-scope="scope">
              <span>{{getuserStatus(scope.row.status)}}</span>
            </template>
          </el-table-column>
          <el-table-column property="tranAddr" label="提币地址"></el-table-column>
          <el-table-column property="txHash" label="交易哈希"></el-table-column>
          <el-table-column property="serviceCharge" label="手续费"></el-table-column>
          <!-- <el-table-column property="tranAddr" label="地址"></el-table-column>
          <el-table-column property="protocolName" label="链类型"></el-table-column> -->
          <el-table-column property="coinName" label="币种名称"></el-table-column>
          <!-- <el-table-column property="coinId" label="币种ID"></el-table-column>
          <el-table-column property="protocolType" label="链类型ID"></el-table-column> -->
          <el-table-column property="createTime" label="时间"></el-table-column>
          <!-- <el-table-column label="到账时间">
            <template slot-scope="scope">
              <div style="display:flex;">
                {{scope.row.timeLevel==0?'24小时':scope.row.timeLevel==1?'30分钟':scope.row.timeLevel==2?'10分钟':''}}
              </div>
            </template>
          </el-table-column> -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div style="display:flex;" v-if="scope.row.status==0">
                <el-button type="success" size="mini" @click="submit(scope.row.id)">确认</el-button>
                <el-button
                  type="danger"
                  size="mini"
                  @click="jujueConfirm(scope.row.id)"
                  style="margin-left:20px;"
                >拒绝</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchfrom.pageNo"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="searchfrom.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchfrom: {
        pageNo: 1,
        pageSize: 10,
        queryString: "",
        queryType: 0//0 申请提币  1审核通过 2提交链上 3链上成功 4链上失败 5拒绝提币 
      },
      gridData: [],
      statusLits: [
        {
          name: "全部",
          status: ''
        },
        {
          name: "申请提币",
          status: 0
        },
        {
          name: "审核通过",
          status: 1
        },
        {
          name: "提交链上",
          status: 2
        },
        {
          name: "链上成功",
          status: 3
        },
        {
          name: "链上失败",
          status: 4
        },
        {
          name: "拒绝提币",
          status: 5
        }
      ],
      total: ""
    };
  },
  created() {
    this.getOrderList();
  },
  methods: {
    searchUserList() {
      this.searchfrom.pageNo = 1;
      this.getOrderList();
    },
    handleSizeChange(newSize) {
      this.searchfrom.pageSize = newSize;
      this.getOrderList();
    },
    handleCurrentChange(newPage) {
      this.searchfrom.pageNo = newPage;
      this.getOrderList();
    },
    submit(row) {
      this.$confirm("请确认要通过该笔提币申请, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .post("/manage/user/withdrawVerify", {
              queryId: row,
              queryType:1
            })
            .then(res => {
              if (res.data.status == 1) {
                this.getOrderList();
                this.$message({
                  message: res.data.message,
                  type: "success"
                });
              } else {
                this.$message({
                  message: res.data.message,
                  type: "info"
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    jujueConfirm(row){
      this.$confirm("请确认要拒绝该笔提币申请, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .post("/manage/user/withdrawVerify", {
              queryId: row,
              queryType:2
            })
            .then(res => {
              if (res.data.status == 1) {
                this.getOrderList();
                this.$message({
                  message: res.data.message,
                  type: "success"
                });
              } else {
                this.$message({
                  message: res.data.message,
                  type: "info"
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    getuserStatus(row) {
      let re = "";
      this.statusLits.forEach(obj => {
        if (obj.status == row) {
          re = obj.name;
        }
      });
      return re;
    },
    getOrderList() {
      // POST
      this.$http
        .post("/manage/user/withdrawList", this.searchfrom)
        .then(res => {
         console.log(res);
          if (res.data.status == 1) {
            this.gridData = res.data.data.list;
            this.total = res.data.data.total;
            console.log(this.gridData);
          } else {
            this.$message({
              message: res.data.message,
              type: "success"
            });
          }
        });
    }
  }
};
</script>

<style scoped>
</style>
